<ion-header>
  <ion-toolbar color="tertiary">
    <ion-title>
      Firestore Image Upload
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-card class="ion-text-center" *ngIf="!isUploading && !isUploaded">
    <ion-card-header>
      <ion-card-title>Choose Images to Upload</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-button color="success" shape="round" size="large">
        <span>Select Image</span>
        <input id="uploadBtn" type="file" class="upload" (change)="uploadFile($event.target.files)" />
      </ion-button>
    </ion-card-content>
  </ion-card>
  <ion-card class="ion-text-center" *ngIf="isUploading && !isUploaded">
    <ion-card-header>
      <ion-card-title>Selected File:<b>{{ fileName }}</b></ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <div *ngIf="percentage | async as pct">
        Progress: {{ pct | number }}%
        <ion-progress-bar value="{{ pct / 100 }}"></ion-progress-bar>
      </div>
      <div *ngIf="snapshot | async as snap">
        File Size: {{ snap.totalBytes | fileSizePipe }} Transfered:
        {{ snap.bytesTransferred | fileSizePipe }}
        <div *ngIf="snapshot && snap.bytesTransferred != snap.totalBytes">
          <ion-button color="warning" size="small" (click)="task.pause()" class="button is-warning">Pause</ion-button>
          <ion-button size="small" (click)="task.resume()" class="button is-info">Resume</ion-button>
          <ion-button color="danger" size="small" (click)="task.cancel()" class="button is-danger">Cancel</ion-button>
        </div>
      </div>
    </ion-card-content>
  </ion-card>
  <ion-card class="ion-text-center" *ngIf="!isUploading && isUploaded">
    <ion-card-header>
      <ion-card-title>
        <b>{{ fileName }}</b> Uploaded!
      </ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <div *ngIf="UploadedFileURL | async as url">
        <img [src]="url" />
        <a [href]="url" target="_blank" rel="noopener">Download</a>
      </div>
      File Size: {{ fileSize | fileSizePipe }}
      <ion-button expand="full" color="success" (click)="isUploading = isUploaded = false">Upload More</ion-button>
    </ion-card-content>
  </ion-card>

  <h2 class="ion-text-center">Uploaded Freaky Images</h2>

  <ion-card color="light" class="ion-text-center" *ngFor="let item of images | async">
    <ion-card-header>
      <ion-card-title>
        {{ item.name }}
      </ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <img [src]="item.filepath" />
      <a [href]="item.filepath" target="_blank" rel="noopener">Download</a>
    </ion-card-content>
  </ion-card>
</ion-content>